<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .menu {
            /* width: 234px; */
            /* height: 386px; */
            border: 1px solid gray;
        }

        .list {
            height: 386px;
        }

        .menu .yijian {
            background-color: rgb(48, 56, 53);
            padding: 24px 20px 14px;
        }

        .menu .yijian a {
            color: #b0b0b0;
            font-size: 12px;
            margin-left: 5px;
            width: 60px;
            line-height: 1.5;
        }

        .menu .list {
            display: flex;
            justify-content: flex-start;
        }

        .menu .list div:first-child span {
            background-color: #353E3B;
            /* padding: 0 20px 20px; */
        }

        /* .menu .list div:first-child div a {
            color: #ffffff;
            font-size: 16px;
        } */

        /* .menu .list div:first-child div {
            border: 1px solid black;
            display: flex;
            justify-content: left;
        } */

        /* .menu .list div:first-child div div {
            display: block;
            width: 120px;
            padding: 0;
        } */

        /* .menu .list div:first-child div div a {
            color: #B0B0B0;
            margin-left: 5px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        } */

        /* .menu .list div:last-child div ul {
            background-color: #ffffff;
            border: 1px solid black;
            width: 310px;
            height: 570px;
        } */

        .menu .list div:last-child div ul li {
            list-style: none;
            padding: 20px 0 20px 27px;
        }


        .menu .list div:last-child div ul li a {
            color: #b0b0b0;
            font-size: 14px;
        }

        .menu .list div:last-child div ul li a img {
            width: 36px;
            height: 36px;
        }

        .menu .list>div:last-child>div:not(.active) {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 分级目录 -->
    <div class="menu">
        <!-- 一键选茶 -->
        <div class="yijian">
            <span style="font-size: 12px;color:#fff; background-image: url(../img/img-small/一键选茶bg.png);">一键选茶</span>
            <div>
                <a href="">自主助手</a>
                <a href="">自饮锦囊</a>
                <a href="">送礼助手</a>
                <a href="">送礼锦囊</a>
            </div>
        </div>
        <!-- 目录 -->
        <div class="list">
            <!-- 左侧 -->
            <div>
                <span>
                    <a href="">绿茶</a>
                    <div>
                        <a href="">西湖龙井</a>
                        <a href="">浙江龙井</a>
                        <a href="">安吉白茶</a>
                        <a href="">茗优绿茶</a>
                    </div>
                </span>
                <span>
                    <a href="">白茶</a>
                    <div>
                        <a href="">福鼎白茶</a>
                        <a href="">古树白茶</a>
                        <a href="">馆藏白茶</a>
                    </div>
                </span>
                <span>
                    <a href="">红茶</a>
                    <div>
                        <a href="">金骏眉</a>
                        <a href="">正山小种</a>
                        <a href="">云南滇红</a>
                        <a href="">小众红茶</a>
                    </div>
                </span>
                <span>
                    <a href="">乌龙茶</a>
                    <div>
                        <a href="">武夷岩茶</a>
                        <a href="">安溪铁观音</a>
                        <a href="">凤凰单枞</a>
                    </div>
                </span>
                <span>
                    <a href="">黑茶</a>
                    <div>
                        <a href="">普洱茶</a>
                        <a href="">柑普茶</a>
                        <a href="">安化黑茶</a>
                    </div>
                </span>
                <span>
                    <a href="">花茶</a>
                    <div>
                        <a href="">茉莉花茶</a>
                        <a href="">菊花茶</a>
                        <a href="">其他花茶</a>
                    </div>
                </span>
                <span>
                    <a href="">茶器</a>
                    <div>
                        <a href="">茶具功夫</a>
                        <a href="">旅行办公茶</a>
                        <a href="">其他配件</a>
                        <a href="">紫砂壶</a>
                    </div>
                </span>
            </div>
            <!-- 右侧 -->
            <div>
                <div id="tab1" class="active">
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/西湖龙井.png" alt="">
                            </a>
                            <a href="">西湖龙井</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/浙江龙井.png" alt="">
                            </a>
                            <a href="">浙江龙井</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/安吉白茶.png" alt="">
                            </a>
                            <a href="">安吉白茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/茗优绿茶.png" alt="">
                            </a>
                            <a href="">茗优绿茶</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/福鼎白茶.png" alt="">
                            </a>
                            <a href="">福鼎白茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/古树白茶.png" alt="">
                            </a>
                            <a href="">古树白茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/馆藏白茶.png" alt="">
                            </a>
                            <a href="">馆藏白茶</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/金骏眉.png" alt="">
                            </a>
                            <a href="">金骏眉</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/正山小种.png" alt="">
                            </a>
                            <a href="">正山小种</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/云南滇红.png" alt="">
                            </a>
                            <a href="">云南滇红</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/小众红茶.png" alt="">
                            </a>
                            <a href="">小众红茶</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/武夷岩茶.png" alt="">
                            </a>
                            <a href="">武夷岩茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/安溪铁观音.png" alt="">
                            </a>
                            <a href="">安溪铁观音</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/凤凰单枞.png" alt="">
                            </a>
                            <a href="">凤凰单枞</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/普洱茶.png" alt="">
                            </a>
                            <a href="">普洱茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/柑普茶.jpg" alt="">
                            </a>
                            <a href="">柑普茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/安化黑茶.png" alt="">
                            </a>
                            <a href="">安华黑茶</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/茉莉花茶.png" alt="">
                            </a>
                            <a href="">茉莉花茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/菊花茶.png" alt="">
                            </a>
                            <a href="">菊花茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/其他配件.png" alt="">
                            </a>
                            <a href="">其他花茶</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/功夫茶具.png" alt="">
                            </a>
                            <a href="">功夫茶具</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/旅行版公茶具.png" alt="">
                            </a>
                            <a href="">旅行办公茶</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/其他配件.png" alt="">
                            </a>
                            <a href="">其他配件</a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/classification_list/紫砂壶.png" alt="">
                            </a>
                            <a href="">紫砂壶</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="../vendor/jquery-3.6.0.js"></script>
    <script></script>
</body>

</html>